<template>
  <div>
    <div class="warp" v-show="scene">
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="#dd1a21" >
        <van-swipe-item
          v-for="(item, index) in homeStore.bannerLIst"
          :key="index"
          ><img :src="item.picUrl" alt="" v-lazy='item.picUrl'
        /></van-swipe-item>
      </van-swipe>
      <div class="recommend">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
          <van-list
            v-model="isUpLoading"
            :finished="upFinished"
            @load="onLoad"
            :offset="offset"
             finished-text="---我也是有底线的----"
          >
            <div v-for="(item,index) in categoryData" :key="index">
              <div class="commodityTitle">
                <h3 class="commodityTitle_title">
                  {{ item.category.name }}
                </h3>
                <p class="smallCommodityTitle">
                  {{
                    item.category.frontName
                  }}
                </p>
              </div>
              <div class="recommendList">
                <div
                  class="item"
                  v-for="good in item.itemList"
                  :key="good.id"
                >
                  <img :src="good.listPicUrl" alt="" v-lazy='good.listPicUrl' />
                  <p id="title">
                    {{ good.simpleDesc }}
                  </p>
                  <p class="price">
                    <span class="getPrice">到手价</span>
                    <span class="icon">¥</span>
                    <span class="currentPrice">{{ good.sortOriginPrice }}</span>
                  </p>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <div v-show="scene === false">
      <van-loading size="24px" vertical type="spinner" color="#0094ff"
        >加载中...</van-loading
      >
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Recommend",
};
</script>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, watch } from "@vue/runtime-core";
import { useHomeStore } from "../../stores/home";
import cloneDeep from 'lodash';
let isLoading = ref(false); //下拉刷新
let isUpLoading = ref(false); //上拉加载
let upFinished = ref(false); //上拉加载完毕
let offset = ref(100); //滚动条与底部距离小于 offset 时触发load事件
const loading = ref(false);
//仓库
const homeStore = useHomeStore();
//父组件传递参数
let props = defineProps(["categoryId"]);
const categoryData: any = reactive([]);
const currentPage = ref(0);
const scene = ref(false);
const onRefresh = () => {
  upFinished.value = false;
  isLoading.value = false;
};
const onLoad = async () => {
  isUpLoading.value = false;
  currentPage.value = currentPage.value + 1;
  categoryData.push(homeStore.oneCategoryList[currentPage.value]) 
  
};
//获取分类数据
const getCategorydata = async () => {
  await homeStore.getCategoryList(props.categoryId);
};
watch(
  () => props.categoryId,
  async () => {
    scene.value = false;
    homeStore.oneCategoryList.value = [];
    await getCategorydata();
    categoryData[0] = homeStore.oneCategoryList[0];
    scene.value = true;
  },
  {
    deep: true,
  }
);
</script>

<style scoped>
.recommend {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  font-size: 12px;
}
.my-swipe .van-swipe-item {
  width: 375px;
  height: 185px;
}
.my-swipe .van-swipe-item img {
  width: 375px;
  height: 185px;
  display: block;
}
.commodityTitle {
  width: 375px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
.smallCommodityTitle {
  font-size: 12px;
}
.recommendList {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 10px;
}
.recommendList .item {
  margin-right: 5px;
}
.item img {
  width: 172.5px;
  height: 172.5px;
  border-radius: 5px;
}
.getPrice,
.icon {
  font-size: 14px;
}
.currentPrice {
  font-size: 16px;
  color: #dd1a21;
}
#title {
  width: 172.5px;
  height: 45px;
  font-size: 15px;
  line-height: 23px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
:deep().van-loading {
  position: fixed;
  top: 50%;
  left: 35%;
  transform: translate(50%);
}
</style>